<template>
    <div>
        <table border="1">
            <tr>
                <td><input type="checkbox" v-model="checked" @change="qx"></td>
                <td>名字</td>
                <td>价格</td>
                <td>数量</td>
            </tr>
            <tr v-for="(item,index) in goods">
                <td><input type="checkbox" v-model="item.checked"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="item.num===1 ? 1:item.num--">-</button>
                    <input type="text" v-model="item.num"  @change="item.num<=0 ? 0 : item.num ">
                    <button @click="item.num===10 ? 10:item.num++">+</button>
                </td>
            </tr>
        </table>
         小计：{{'￥'+goods1Price.toFixed(2)+'元'}}
         <table border="1">
            <tr>
                <td><input type="checkbox" v-model="checked2" @change="qx2"></td>
                <td>名字</td>
                <td>价格</td>
                <td>数量</td>
            </tr>
            <tr v-for="(item,index) in goods2">
                <td><input type="checkbox" v-model="item.checked"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="item.num===1 ? 1:item.num--">-</button>
                    <input type="text" v-model="item.num"  @change="item.num<=0 ? 0 : item.num ">
                    <button @click="item.num===10 ? 10:item.num++">+</button>
                </td>
            </tr>
        </table>
         小计：{{'￥'+goods2Price.toFixed(2)+'元'}}
         <table border="1">
            <tr>
                <td><input type="checkbox" v-model="checked3" @change="qx3"></td>
                <td>名字</td>
                <td>价格</td>
                <td>数量</td>
            </tr>
            <tr v-for="(item,index) in goods3">
                <td><input type="checkbox" v-model="item.checked"></td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="item.num===1 ? 1:item.num--">-</button>
                    <input type="text" v-model="item.num"  @change="item.num<=0 ? 0 : item.num ">
                    <button @click="item.num===10 ? 10:item.num++">+</button>
                </td>
            </tr>
        </table>
         小计：{{'￥'+goods3Price.toFixed(2)+'元'}}

         <h4>总价{{'￥'+(goods1Price+goods2Price+goods3Price).toFixed(2)+"元"}}</h4>
    </div>
</template>


<script>
import data from '../assets/goods.json'
import { forEach } from 'lodash-es';
    export default {
        data() {
            return {
               data,
               checked:false,
               checked2:false,
               checked3:false,
               goods:data.goods1,
               goods2:data.goods2,
               goods3:data.goods3,
            }
        },
        mounted() {
            console.log(data);
        },
        methods: {
           qx(){
               this.goods.map(item=>{
                item.checked=this.checked;
            })
           },
           qx2(){
               this.goods2.map(item=>{
                item.checked=this.checked2;
            })
           },
           qx3(){
               this.goods3.map(item=>{
                item.checked=this.checked3;
            })
           }
        },
        watch:{
            goods:{
            handler(val){
                this.checked=val.every((item)=>{
                    return item.checked
                })
            },
            deep:true,
        },
        goods2:{
            handler(val){
                this.checked2=val.every((item)=>{
                    return item.checked
                })
            },
            deep:true,
        },
        goods3:{
            handler(val){
                this.checked3=val.every((item)=>{
                    return item.checked
                })
            },
            deep:true,
        }
        },
        computed:{
            goods1Price(){
                let sum=0;
                this.goods.map(val=>{
                    if(val.checked===true){
                        sum+=val.price * val.num;
                    }
                })
                return sum
            },
            goods2Price(){
                let sum=0;
                this.goods2.map(val=>{
                    if(val.checked===true){
                        sum+=val.price * val.num;
                    }
                })
                return sum
            },
            goods3Price(){
                let sum=0;
                this.goods3.map(val=>{
                    if(val.checked===true){
                        sum+=val.price * val.num;
                    }
                })
                return sum
            },
        }
    }
</script>

<style lang="scss" scoped>
table{
    border-spacing: 0;
    border-collapse: 0;
    button{
        width: 20px;
    }
    input{
        width: 20px;
    }
}
</style>